<template>
    <div>
        <page-main title="详细技能-程海超" title-icon="dashboard">
            <el-row style="padding: 0 20px;" :gutter="20">
                <el-col :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24" style="text-align: center;">
                    书面及表达能力
                    <el-progress :percentage="50" style="margin-top: 15px;"/>
                </el-col>
                <el-col :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24"
                        class="ability-statistic"
                >
                    <div class="ability-statistic-left">
                        <el-avatar :size="55" shape="square" class="statistic-left-header-1">
                            <svg-icon name="file"></svg-icon>
                        </el-avatar>
                    </div>
                    <div class="ability-statistic-right">
                        <div class="statistic-right-header">
                            计划总结(个)
                        </div>
                        <div class="statistic-right-num">
                            5
                        </div>
                    </div>
                </el-col>
                <el-col :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24" class="ability-statistic">
                    <div class="ability-statistic-left">
                        <el-avatar :size="55" shape="square" class="statistic-left-header-2">
                            <svg-icon name="file"></svg-icon>
                        </el-avatar>
                    </div>
                    <div class="ability-statistic-right">
                        <div class="statistic-right-header">
                            教学反思(个)
                        </div>
                        <div class="statistic-right-num">
                            3
                        </div>
                    </div>
                </el-col>
                <el-col :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24" class="ability-statistic">
                    <div class="ability-statistic-left">
                        <el-avatar :size="55" shape="square" class="statistic-left-header-3">
                            <svg-icon name="file"></svg-icon>
                        </el-avatar>
                    </div>
                    <div class="ability-statistic-right">
                        <div class="statistic-right-header">
                            学生评语
                        </div>
                        <div class="statistic-right-num">
                            2
                        </div>
                    </div>
                </el-col>
                <el-col :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24" class="ability-statistic">
                    <div class="ability-statistic-left">
                        <el-avatar :size="55" shape="square" class="statistic-left-header-4">
                            <svg-icon name="file"></svg-icon>
                        </el-avatar>
                    </div>
                    <div class="ability-statistic-right">
                        <div class="statistic-right-header">
                            报告(个)
                        </div>
                        <div class="statistic-right-num">
                            10
                        </div>
                    </div>
                </el-col>
            </el-row>
        </page-main>
        <div class="ability-detail-list">
            <el-row :gutter="20">
                <el-col v-for="(item,index) in abilityDetailList" :key="index" :md="12" style="margin-bottom: 15px;">
                    <div :class="`list-header-${index+1}`">
                        {{ item.header }}
                    </div>
                    <div class="list-content">
                        <ul v-if="item.list.length > 0">
                            <li v-for="data in item.list"
                                :key="data.id"
                                class="flex justify-between align-center"
                            >
                                <div>{{ data.title }}</div>
                                <div>{{ data.time }}</div>
                                <div>
                                    <button-panel title="下载" type="danger"/>
                                    <button-panel title="预览"/>
                                </div>
                            </li>
                            <!--                            <li style="text-align: center;">-->
                            <!--                                <el-button type="" round @click="showMore">{{ txt }}</el-button>-->
                            <!--                            </li>-->
                        </ul>
                        <el-empty v-else description="暂无数据" style="    height: 250px;"/>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import PageMain from '@/components/PageMain'
import ButtonPanel from '@/components/buttonPanel/buttonPanel'
import SvgIcon from '@/components/SvgIcon'

export default {
    components: {SvgIcon, ButtonPanel, PageMain},
    data() {
        return {
            isShow: true,
            txt: '显示全部',
            num: 5,
            abilityDetailList: [
                {
                    header: '计划总结',
                    list: [
                        {
                            id: 1,
                            title: '一年级计划总结',
                            time: '2021-04-25'
                        },
                        {
                            id: 2,
                            title: '2年级计划总结',
                            time: '2021-04-25'
                        }, {
                            id: 3,
                            title: '3年级计划总结',
                            time: '2021-04-25'
                        }, {
                            id: 4,
                            title: '4年级计划总结',
                            time: '2021-04-25'
                        }, {
                            id: 5,
                            title: '5年级计划总结',
                            time: '2021-04-25'
                        }, {
                            id: 6,
                            title: '6年级计划总结',
                            time: '2021-04-25'
                        },
                        {
                            id: 7,
                            title: '7年级计划总结',
                            time: '2021-04-25'
                        }
                    ]
                },
                {
                    header: '教学反思',
                    list: []
                },
                {
                    header: '学生评语',
                    list: []
                },
                {
                    header: '报告',
                    list: []
                }
            ]
        }
    },
    methods: {
        showMore() {
            this.isShow = !this.isShow
            this.num = this.isShow ? 5 : this.abilityDetailList[0].list.length
            this.txt = this.isShow ? '显示全部' : '收起'
        }
    }
}
</script>

<style scoped lang="scss">
@media only screen and (min-width: 768px) {
    .el-col-sm-4-8 {
        width: 20%;
    }
    .el-col-sm-offset-4-8 {
        margin-left: 20%;
    }
    .el-col-sm-pull-4-8 {
        position: relative;
        right: 20%;
    }
    .el-col-sm-push-4-8 {
        position: relative;
        left: 20%;
    }
}
@media only screen and (min-width: 992px) {
    .el-col-md-4-8 {
        width: 20%;
    }
    .el-col-md-offset-4-8 {
        margin-left: 20%;
    }
    .el-col-md-pull-4-8 {
        position: relative;
        right: 20%;
    }
    .el-col-md-push-4-8 {
        position: relative;
        left: 20%;
    }
}
@media only screen and (min-width: 1200px) {
    .el-col-lg-4-8 {
        width: 20%;
    }
    .el-col-lg-offset-4-8 {
        margin-left: 20%;
    }
    .el-col-lg-pull-4-8 {
        position: relative;
        right: 20%;
    }
    .el-col-lg-push-4-8 {
        position: relative;
        left: 20%;
    }
}
@media only screen and (min-width: 1920px) {
    .el-col-xl-4-8 {
        width: 20%;
    }
    .el-col-xl-offset-4-8 {
        margin-left: 20%;
    }
    .el-col-xl-pull-4-8 {
        position: relative;
        right: 20%;
    }
    .el-col-xl-push-4-8 {
        position: relative;
        left: 20%;
    }
}
.ability-detail-list {
    position: relative;
    padding: 20px;
}

$Color: rgba(82, 193, 245, 1), rgba(75, 206, 208, 1), rgba(251, 98, 96, 1), rgba(129, 103, 245, 1);
@each $c in $Color {
    $i: index($Color, $c);
    .list-header-#{$i} {
        background: $c;
        color: #fff;
        padding: 20px;
        font-size: 16px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-weight: 300;
    }
    .statistic-left-header-#{$i} {
        display: flex;
        justify-content: center;
        align-items: center;
        background: $c;
        .svg-icon {
            font-size: 45px;
        }
    }
}
.list-content {
    background: #fff;
    padding: 20px;
    height: 310px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow-x: hidden;
    ul {
        li {
            margin-bottom: 15px;
        }
        li:last-child {
            margin-bottom: 0;
        }
    }
}
.ability-statistic {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgb(242, 243, 245);
    .ability-statistic-left {
        margin-right: 16px;
    }
    .ability-statistic-right {
        .statistic-right-header {
            margin-bottom: 8px;
            font-size: 14px;
            color: rgb(78, 89, 105);
        }
        .statistic-right-num {
            font-weight: 500;
            font-size: 26px;
            white-space: nowrap;
            color: rgb(29, 33, 41);
        }
    }
}
</style>
